<template>
  <vue-draggable-resizable
    :x="x"
    :y="y"
    :w="width"
    :h="height"
    :parent="parent"
    :handles="handles"
    :min-width="minWidth"
    :min-height="minHeight"
    @activated="handleActivated"
    @deactivated="handleDeactivated"
    @dragging="handleDragging"
    @resizing="handleResize"
  >
    <slot />
  </vue-draggable-resizable>
</template>

<script lang="ts">
  // make sure your getting it in the components folder
  import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
  // optionally import default styles
  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
  import { defineComponent, reactive, toRefs } from 'vue'

  export default defineComponent({
    name: 'XDraggableResizable',
    components: {
      VueDraggableResizable
    },
    props: {
      parent: {
        type: Boolean,
        default: true
      },
      handles: {
        type: Array,
        default: () => ['tl', 'tr', 'br', 'bl']
      },
      width: {
        type: Number,
        default: 0
      },
      height: {
        type: Number,
        default: 0
      },
      minWidth: {
        type: Number,
        default: 20
      },
      minHeight: {
        type: Number,
        default: 20
      },
      x: {
        type: Number,
        default: 0
      },
      y: {
        type: Number,
        default: 0
      }
    },
    emits: ['dragging', 'resizing', 'activated', 'deactivated'],
    setup($props, { emit: $emit }) {
      const $state = reactive({
        ...toRefs($props)
      })

      const handleActivated = (e: any) => {
        $emit('activated', e)
      }

      const handleDeactivated = (e: any) => {
        $emit('deactivated', e)
      }

      const handleDragging = (x: number, y: number) => {
        $emit('dragging', x, y)
      }

      const handleResize = (x: number, y: number, width: number, height: number) => {
        $emit('resizing', x, y, width, height)
      }

      return {
        ...toRefs($state),
        handleActivated,
        handleDeactivated,
        handleDragging,
        handleResize
      }
    }
  })
</script>

<style></style>
